<script setup lang="ts">
import { ref } from "vue";
import { Dayjs } from "dayjs";

const value = ref<Dayjs>();

const data = ref([
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
])

</script>

<template>
  <div>
    <a-flex justify="space-between" align="top" wrap>
      <a-list item-layout="horizontal" :data-source="data" style="width: 50%;">
        <template #header>
          今日任务
        </template>
        <template #renderItem="{ item }">
          <a-list-item>
            <a-tag color="pink">pink</a-tag>
            <a-list-item-meta :title="item.title" description="Ant Design, a design language for background applications by Alibaba."></a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
      <a-calendar v-model:value="value" style="width: 50%; min-width: 1000px;">
        <template #dateCellRender="{ current}">
          {{  current.format('YYYY-MM-DD') }}
        </template>
        <template #monthCellRender="{ current }">
          {{ current.format('YYYY-MM') }}
        </template>
      </a-calendar>
    </a-flex>
  </div>
</template>

<style scoped>

</style>